const WIDTH = 1024
const HEIGHT = 768
const RADIUS = 8
const MT = 60
const ML = 30
const ENDTIME = new Date(2022, 10, 8, 23, 59, 59)
let curShowTimeSec = 0
var balls = []
window.onload = () => {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    canvas.width = WIDTH
    canvas.height = HEIGHT

    curShowTimeSec = getCurShowTimeSec()
    setInterval(() => {
        render(context)
        update()
    }, 50)

}
function update () {
    var nextSHowTimeS = getCurShowTimeSec();

    let nextHour = parseInt( nextSHowTimeS / 3600)
    let nextMins = parseInt( (nextSHowTimeS - nextHour * 3600) / 60 )
    let nextSec = parseInt( nextSHowTimeS % 60)

    let curHour = parseInt( curShowTimeSec / 3600)
    let curMins = parseInt( (curShowTimeSec - curHour * 3600) / 60 )
    let curSec = parseInt( curShowTimeSec % 60)

    if (nextSec != curSec) {
        if (parseInt(curHour / 10) != parseInt(nextHour / 10)) {
            addBalls(ML + 0, MT, parseInt(nextHour / 10))
        }
        if (parseInt(curHour % 10) != parseInt(nextHour % 10)) {
            addBalls(ML + 15 * (RADIUS + 1), MT, parseInt(nextHour % 10))
        }

        if (parseInt(curMins / 10) != parseInt(nextMins / 10)) {
            addBalls(ML + 15 * (RADIUS + 1), MT, parseInt(nextMins / 10))
        }
        if (parseInt(curMins % 10) != parseInt(nextMins % 10)) {
            addBalls(ML + 39 * (RADIUS + 1), MT, parseInt(nextMins % 10))
        }

        if (parseInt(curSec / 10) != parseInt(nextSec / 10)) {
            addBalls(ML + 78 * (RADIUS + 1), MT, parseInt(nextSec / 10))
        }
        if (parseInt(curSec % 10) != parseInt(nextSec % 10)) {
            addBalls(ML + 93 * (RADIUS + 1), MT, parseInt(nextSec % 10))
        }
        console.log(balls.length)

        
        curShowTimeSec = nextSHowTimeS
    }
    updateBalls()

}
function updateBalls () {
    for(let i = 0; i< balls.length; i++) {
        balls[i].x += balls[i].vx
        balls[i].y -= balls[i].vy
        balls[i].y += balls[i].g
        if ( balls[i].y >= HEIGHT - RADIUS) {
            balls[i].y  =  HEIGHT - RADIUS
            balls[i].vy = -balls[i].vy * 0.75
        }
        if (balls[i].x >= (WIDTH - RADIUS)) {
            balls[i].vx = -1 * balls[i].vx
        }
        if (balls[i].x <  -RADIUS) {
            balls.splice(1, i)
        }
    }
}
function addBalls (x, y, num) {
    for (let i = 0; i < digit[num].length; i++) {
        for (let j = 0; j < digit[num][i].length; j++) {
            
            if (digit[num][i][j] == 1) {
                var singleBall = {
                    x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
                    y: y + i* 2 * (RADIUS + 1) + (RADIUS + 1),
                    g: 1.5 + Math.random(),
                    vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
                    vy: -5,
                    color: `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
                }
                balls.push(singleBall)
               
            }
           
        }

    }
}
function getCurShowTimeSec () {
    let time =  Math.round((ENDTIME.getTime() - new Date().getTime()) / 1000)
    return time >=0 ? time : 0
}

function render (ctx) {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    
    let hour = parseInt( curShowTimeSec / 3600)
    let mins = parseInt( (curShowTimeSec - hour * 3600) / 60 )
    let sec = parseInt( curShowTimeSec % 60)

    renderDigit(ML, MT, parseInt(hour / 10), ctx)
    renderDigit(ML + 15 * (RADIUS + 1), MT, parseInt(hour % 10), ctx)
    renderDigit(ML + 30 * (RADIUS + 1), MT, 10, ctx)

    renderDigit(ML + 39 * (RADIUS + 1), MT, parseInt(mins / 10), ctx)
    renderDigit(ML + 54 * (RADIUS + 1), MT, parseInt(mins % 10), ctx)
    renderDigit(ML + 69 * (RADIUS + 1), MT, 10, ctx)

    renderDigit(ML + 78 * (RADIUS + 1), MT, parseInt(sec / 10), ctx)
    renderDigit(ML + 93 * (RADIUS + 1), MT, parseInt(sec % 10), ctx)

    for(let i = 0; i < balls.length; i++) {
        ctx.fillStyle = balls[i].color
        ctx.beginPath()
        ctx.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI)
        ctx.fill()
    }

}

function renderDigit (x, y, num, ctx) {
    ctx.fillStyle = `rgba(0,0,0)`
    for (let i = 0; i < digit[num].length; i++) {
        for (let j = 0; j < digit[num][i].length; j++) {
            
            if (digit[num][i][j] == 1) {
                ctx.beginPath()
                ctx.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i* 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS,  0, Math.PI * 2 )
                ctx.fill()
            }
           
        }

    }
}